import React from 'react';
import {connect} from 'react-redux';
import {Form, Badge, Button, Popover, message, Input, Switch, Icon} from 'antd';
const FormItem = Form.Item;
import {messages} from "share/common";
import CCService from 'containers/setting/cost-center/cost-center.service';
import LanguageInput from "components/template/language-input/language-input";

class CostCenterItemRoleDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      record: {enabled: true, positionCode: "", positionName: ""},
    };
  }

  componentDidMount() {
    let {record} = this.props.params;
    if(record.id){
      this.setState({
        record
      })
    }
  }

  //名称：自定义值列表项多语言
  i18nNameChange = (name, i18nName) => {
    let record = this.state.record;
    record.positionName = name;
    if (record.i18n) {
      record.i18n.positionName = i18nName;
    } else {
      record.i18n = {
        positionName: i18nName
      };
    }
    this.setState({
      record
    })
  };

  handleSave = () => {
    let {record} = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let param = Object.assign(record, values), method = record.id ? 'editCostCenterItemRole' : 'newCostCenterItemRole';
        CCService[method](param)
          .then(res => {
          this.props.close();
        }).catch(err => {

        })
      }
    })
  };

  render() {
    const {loading, record} = this.state;
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18, },
    };
    return (
      <div>
        <Form>
            <FormItem {...formItemLayout} label={messages('common.column.status')/*状态*/}>
              {getFieldDecorator("enabled", {
                initialValue: record.enabled,
                valuePropName: 'checked',
              })
              (<Switch/>)
              }
            </FormItem>
          <FormItem {...formItemLayout} label={messages('basic-5.key839')/*成本中心项角色编码*/}>
            {getFieldDecorator('positionCode', {
              initialValue: record.positionCode,
              rules: [
                {
                  required: true,
                  message: messages('common.please.input')/*请输入*/
                },
                {
                  max: 20,
                  message: messages('basic-5.key378')/*最多输入20个字符*/,
                }
              ]
            })(
              <Input disabled={!!(record.id)}
                     placeholder={messages('common.please.input')/*请输入*/}/>)

            }
            <div className="standard-note-text">{messages('basic-5.key262')/*保存后将不可修改*/}</div>
          </FormItem>
          <FormItem {...formItemLayout} label={messages('basic-5.key840')/*成本中心项角色名称*/}>
            {getFieldDecorator('positionName', {
              initialValue: record.positionName,
              rules: [
                {
                  required: true,
                  message: messages('common.please.input')/*请输入*/
                },
                {
                  max: 50,
                  message: messages('basic-5.key194')/*最多输入50个字符*/,
                }
              ],
            })(
              <LanguageInput
                disabled={record.positionCode === 'manager'}
                name={record.positionName}
                i18nName={record.i18n ? record.i18n.positionName : null}
                isEdit={record.id}
                nameChange={this.i18nNameChange}/>
            )}
          </FormItem>
          <div className="footer-operate">
            <Button type="primary" loading={loading} onClick={this.handleSave} disabled={record.positionCode === 'manager'}>
              {messages('common.save')/*保存*/}
            </Button>
            <Button onClick={()=>{this.props.close()}} className='left-gap'>
              {messages('common.cancel')/*取消*/}
            </Button>
          </div>
        </Form>
      </div>
    )
  }

}

CostCenterItemRoleDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    currentMenuPermission: state.main.currentMenuPermission
  }
}

const WrappedCostCenterItemRole = Form.create()(CostCenterItemRoleDetail);
export default connect(mapStateToProps)(WrappedCostCenterItemRole);
